<template>
  <div>
    <input type="file" id="imageFile" accept="image/*">
  </div>
  xxxxxx
  <div class="canvas-container">
    <canvas id="can">dddd</canvas>
  </div>
</template>
<script setup>
const oContainer = document.querySelector(".canvas-container");
const oCan =document.getElementById("can");
const oImageFile = document.getElementById("imageFile");
// const ctx = oCan.getContext("2d");
console.log(oImageFile);

// const init =() =>{
//   bindEvent()
// }
// init();

// function bindEvent(e){
//   oImageFile.addEventListener("change",handleFileChange,false);
// }
// function handleFileChange(e){
//   const file = e.target.files[0];
//   const reader = new FileReader();
//   reader.readAsDataURL(file);
//   reader.onload = (e)=>{
//     const img = new Image();
//     img.src = e.target.result;
//     img.onload = ()=>{
//       oCan.width = img.width;
//       oCan.height = img.height;
//       ctx.drawImage(img,0,0,img.width,img.height);
//     }
//   }
// }
</script>
<style lang="scss" scoped>
.canvas-container{
  display: none;
  border: 1px solid #ccc;
}
</style>